<template>
  <div class="banner">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="考试Id" width="70">
        <template slot-scope="scope">
          <span>{{ scope.row.ExamId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷名称" width="125">
        <template slot-scope="scope">
          <span>{{ scope.row.ExamName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任课老师" width="125">
        <template slot-scope="scope">
          <span>{{ scope.row.teacher }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开考时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.OpeningTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试时长" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.ExamDuration }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成情况" width="126">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.SubmitTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考试分数" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="mini">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

export interface TableItem {
  ExamId: number;
  ExamName: string;
  teacher: string;
  OpeningTime: string;
  ExamDuration: number;
  type: string;
  SubmitTime?: string;
  score: number;
}

@Component({
  name: "Banner",
})
export default class extends Vue {
  tableData: Array<TableItem> = [
    {
      ExamId: 203,
      ExamName: "测试试卷-自动出题-不查看答案",
      teacher: "图灵老师",
      OpeningTime: "2001-08-04 10:41:15",
      ExamDuration: 5,
      type: "待考试",
      score: 0,
    },
  ];

}
</script>

<style scoped>
.el-button {
  border-radius: 3.2px !important;
  padding: 5px 12px !important;
}
.el-button:hover {
  border: 1px solid #2d8cf0 !important;
  background-color: white !important;
  color: #2d8cf0 !important;
  padding: 5px 12px !important;
}
.el-button:focus {
  display: none;
}
.el-pagination {
  margin-top: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>